<template>
	<view class="container" v-show="hideModal">
		<view class="mask" @touchmove.stop.prevent @click="close()"></view>
		<view class="content bottom-pos" :animation="animationData" @touchmove.stop.prevent>
			<view class="" style="display: flex; justify-content: space-between;margin: 12rpx 12rpx 0 0;" >
				<view class="" style="width: 45rpx;">
					
				</view>
				<view class="" style="text-align: center;">
					
				</view>
				<image src="../../static/windowcolse.png" @click="close()" mode="" style="width: 45rpx; height: 45rpx;"></image>
			</view>
			<view class="dec"  style="height: 450px;flex-direction: column;">
				<view class="" style="display: flex;flex-direction: column;width: 100%; padding-top: 10rpx;flex: 1 1 0%; height: 200px;">
					<iframe v-if="!!spePushResut" :src="spePushResut.protocolUrl" frameborder="0" style="height: 100%;"></iframe>
				</view>
				<view class="" style="color: #666;font-size: 13px;line-height: 24px;margin-top: 26rpx;">
					<view class="">
						<text>授权人：</text>
						<text>{{(infoData && infoData.username) || ""}}</text>
					</view>
					<view class="">
						<text>授权人身份证号码：</text>
						<text>{{(infoData && infoData.idCard) || ""}}</text>
					</view>
				</view>
				<view class="" 
					@click="submit"
					style="display: flex;flex-direction: row;justify-content: center;margin-top: 10px;">
					<image src="../../static/infobtn.png" mode="" style="width: 355px; height: 85px;"></image>
				</view>

			</view>

		</view>
	</view>

</template>

<script>
	export default {
		name: 'indexshow',
		props: {
		},
		data() {
			return {
				hideModal: false, //模态框的状态  true-隐藏  false-显示
				animationData: {}, //
				spePushResut: undefined,
				infoData: undefined,
			}
		},

		methods: {
			async submit(spePushResut, infoData){
				this.spePushResut = spePushResut;
				this.infoData = infoData;
				uni.showLoading({
					title: '借款中...'
				})
				let res = {}
				
					res = await this.$myRequest({
						url: 'api/merchant/pushToMerchant',
						method: 'post',
						data: {
							orderNo: this.spePushResut.orderNo
						},
					});
				uni.hideLoading()
				console.log('pushToMerchant')
				if (res.speInfoName) {
					uni.redirectTo({
						url: `../home/home?companyName=${this.spePushResut.companyName}`
					})
				} else {
					uni.redirectTo({
						url: `../home/home`
					})
				}
			},
			// 显示遮罩层
			showModal: function(spePushResut, infoData) {
				var that = this;
				this.spePushResut = spePushResut;
				this.infoData = infoData;
				that.hideModal = true
				var animation = uni.createAnimation({
					duration: 300, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
					timingFunction: 'ease', //动画的效果 默认值是linear
				})
				this.animation = animation
				setTimeout(function() {
					that.fadeIn(); //调用显示动画
				}, 10)
			},
			// 隐藏遮罩层
			close: function() {
				var that = this;
				var animation = wx.createAnimation({
					duration: 400, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
					timingFunction: 'ease', //动画的效果 默认值是linear
				})
				this.animation = animation
				that.fadeDown(); //调用隐藏动画   
				setTimeout(function() {
					that.hideModal = false
					that.$emit('close', !that.show)
				}, 10) //先执行下滑动画，再隐藏模块

			},
			//动画集
			fadeIn: function() {
				this.animation.translateY(0).step()
				this.animationData = this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
			},
			fadeDown: function() {
				this.animation.translateY(305).step() //移动的距离
				this.animationData = this.animation.export()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 14px;
		// color: #FFA220;
		height: 24px;
		line-height: 24px;
		padding-left: 8px;
	}

	.textDec {
		padding-left: 24px;
		color: #C8C9CC;
	}

	.dec {
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		color: black;
		padding: 0 15px;
		line-height: 30px;
		height: 30px;

		text {
			display: inline-block;
		}
	}

	.container {
		.mask {
			width: 100%;
			height: 100%;
			background: black;
			opacity: .60;
			z-index: 20;
			position: fixed;
			top: 0;
			left: 0;
		}

		.content {
			width: 100%;
			min-height: 420rpx;
			position: fixed;
			bottom: 0rpx;
			left: 0;
			background-color: #FFFFFF;
			z-index: 21;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
		}

		/*动画前初始位置*/
		.bottom-pos {
			-webkit-transform: translateY(100%);
			transform: translateY(100%);
		}
	}
</style>